<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/public.css">
    <link rel="stylesheet" href="../css/1.css">
    <style>
        .neiul {
            width: 1220px;
            margin: 0 auto;
        }

        .neili {
            float: left;
            width: 280px;
            margin-left: 23px;
            float: left;
            margin-bottom: 30px;
            font-size: 0;
            border: 1px solid #efefef;
            overflow: hidden;
            height: 581px;
            transition: .3s;
            cursor: pointer;
        }

        .neili:hover {
            box-shadow: 0 0 6px 0 #666;
        }

        .img1 {
            width: 280px;
            height: 380px;
        }

        .img2 {
            width: 32px;
            height: 32px;
            margin-left: 15px;
            display: inline-block;
        }

        .neili p {
            /* height: 30px; */
            /* color: #000; */
            /* font-size: 30px; */
        }

        .price {
            color: #333;
            font-size: 14px;
            margin-left: 15px;
            height: 40px;
            line-height: 40px;
        }

        .box1 {
            display: inline-block;
            height: 36px;
            margin: 9px 15px;
        }

        .name1 {
            font-size: 12px;
            /* display: inline-block; */
        }

        .fabu {
            font-size: 12px;
            /* display: inline-block; */
            color: #999;
        }

        .title {
            font-size: 12px;
            color: #666;
            height: 36px;
            margin: 0 15px 24px;
            overflow: hidden;
        }

        .box2 {
            margin: 0 15px;
            height: 42px;
            line-height: 42px;
            border-top: 1px solid #ededed;
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="top">
        <div class="top_m">
            <ul class="top_ml">
                <li>
                    <div class="top_mll">
                        <a href="#" class="qing">亲，请登录</a>
                        <a href="#" class="mianfei">免费登录</a>
                    </div>

                </li>
                <li><a href="#" class="shouji">手机逛淘宝</a></li>
            </ul>
        </div>

        <div class="banner">
            <hr>
            <a href="#">
                <p class="jie">爱逛街</p>
                <p class="wang">guang.taobao.com</p>
            </a>
        </div>

        <div class="nei"></div>
    </div>


    <!-- <script src="../js/1.js">  </script> -->
    <script>
        let arr = [
            {
                id: 1,
                img: "../images/1.jpg",
                images: "../images/1-1.jpg",
                name: "精致生活mei",
                title: "现代简约北欧实木落地式衣帽架简易客厅衣服架衣架卧室挂衣架",
                like: "0",
                price: "￥156.75",
                time: "2017-10-18 15:41:49 发布 "
            },
            {
                id: 2,
                img: "../images/2.jpg",
                images: "../images/1-2.jpg",
                name: "小草爱搭配",
                title: "素缕2020夏装新款女装亚麻外搭防晒衫针织衫开衫姐妹闺蜜装薄外套",
                like: "0",
                price: "￥139.0",
                time: "2017-10-16 23:04:25 发布 "
            },
            {
                id: 3,
                img: "../images/3.jpg",
                images: "../images/1-3.jpg",
                name: "凡物生活",
                title: "【厌式房间】傲娇柜 胡桃木实木床头柜 北欧原创设计卧室收纳柜",
                like: "0",
                price: "￥1710.0",
                time: "2017-10-17 11:15:23 发布 "
            },
            {
                id: 4,
                img: "../images/4.jpg",
                images: "../images/1-4.jpg",
                name: "FUN生活居",
                title: "纳威白色钢琴烤漆电视机柜时尚客厅地柜可伸缩电视柜茶几组合家具",
                like: "0",
                price: "￥2635.0",
                time: "2017-10-18 15:41:49 发布 "
            },
            {
                id: 5,
                img: "../images/5.jpg",
                images: "../images/1-5.jpg",
                name: "爱屋及物",
                title: "[风靡欧美]美式乡村田园风格家具棉麻拉扣高靠背三人布艺沙发组合",
                like: "0",
                price: "￥3580.0",
                time: "2017-10-20 21:58:27 发布 "
            },
            {
                id: 6,
                img: "../images/6.jpg",
                images: "../images/1-6.jpg",
                name: "家有人生",
                title: "北欧茶几简约小户型烤漆客厅现代茶几电视柜组合钢化玻璃长方形",
                like: "0",
                price: "￥1280.0",
                time: "2017-10-21 19:50:36 发布 "
            },
            {
                id: 7,
                img: "../images/7.jpg",
                images: "../images/1-7.jpg",
                name: "阿兹猫日记",
                title: "现代简约北欧实木落地式衣帽架简易客厅衣服架衣架卧室挂衣架",
                like: "0",
                price: "￥156.75",
                time: "2017-10-18 15:41:49 发布 "
            },
            {
                id: 8,
                img: "../images/8.jpg",
                images: "../images/1-8.jpg",
                name: "精致生活mei",
                title: "ins北欧纯棉四件套全棉宿舍三4件套床上用品夏季床单被套床笠1.8m",
                like: "0",
                price: "¥ 158.0",
                time: "2017-10-18 20:47:15 发布 "
            },
        ]
        let nei = document.querySelector(".nei");
        let ul = document.createElement("ul");
        ul.classList.add("neiul")

        arr.forEach((item, index) => {
            let li = document.createElement("li");
            li.classList.add("neili")
            li.setAttribute("idx", item.id)
            let a = function (name) {
                let c;
                let a = name.split("")
                // console.log(a)
                for (let i = 0; i < a.length; i++) {
                    if (i == 0) {
                        c = name[i] + "***"
                    } else if (i == a.length - 1) {
                        c = c + name[i]
                    }
                }
                return c
            }
            let b = a(item.name)
            li.innerHTML = `<img src=` + item.img + ` class="img1">

                                           <p class="price">`+ item.price + `</p>
                                            <img src=` + item.images + ` class="img2">
                                            <div class="box1">   <p class="name1">`+ b + `</p>
                                        <p class="fabu">发布了</p></div>
                                     
                                        <p class="title">`+ item.title + `</p>
                                        <div class="box2"></div>
            
            `;
            li.onclick = () => {
                open("2.html?id=" + li.getAttribute("idx"))
            }
            ul.appendChild(li)
        })


        nei.appendChild(ul)
    </script>
</body>

</html>